<template>
	<view>
		<view class="top">
			<image
				@click="back"
				src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/back%402x.png"
				mode=""
				class="back"
				:style="{top:BarTop + 'px'}"
				v-if="!flexflag"
				></image>
			<view class="order-nav navtwo" :style="{height:BarTop + BarHeight + 5 + 'px',}" v-else>
				<image :style="{top:BarTop + 'px',}" src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/back%402x.png" mode="" class="order-nav-img back" @click="back"></image>
				<text :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}" class="nav-sp">商品详情</text>
			</view>
			<view class="top-img">
				<u-swiper :list="list" mode='number' indicator-pos="bottomRight" :height='850'></u-swiper>
			</view>
			<view class="money">
				<view class="price">
					{{price?price:''}}
				</view>
			    <view class="collect-num">
					<view class="collect" @click="goodsFollow">
						关注
						<u-icon name="heart-fill" size="28" color="#FC595E" style="margin-left: 5rpx;" v-if="data.follow"></u-icon>
						<u-icon name="heart" size="28" color="#989898" style="margin-left: 5rpx;" v-else></u-icon>
					</view>
					<view class="num">
						销量:{{data.sales?data.sales:'0'}}
					</view>
				</view>
			</view>
			<view class="title">
				<text class="label">自营</text>
				<text>{{data.title?data.title:''}}</text>
			</view>
			<view class="warn" >
				下单可得支付金，可用于云仓优送线下实体联盟商家使用
			</view>
		</view>
		<view class="footer">
			<view class="footer-title">
			 	产品信息
			</view>
			<view class="span">
			 	<uv-parse :content="spanContent"></uv-parse>
			</view>
		 	<uv-parse :content="filteredContent"></uv-parse>
		</view>
		<view style="width: 750rpx;height: 136rpx;"></view>
		<view class="btn">
			<view class="btn-left">
				<view class="btn-img" @click="goShop">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Frame%402x.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
					<view class="btn-sp">
						商城
					</view>
				</view>
				<button class="btn-img botton" open-type="contact" style="padding-left: 0;padding-right: 0;background-color: rgba(0, 0, 0, 0);line-height: 0;margin-left: 0;margin-right: 0;">
					<image style="width: 44rpx;height: 44rpx;" src="@/static/images/kefu.png" mode=""></image>
					<view class="btn-sp">
						客服
					</view>
				</button>
			</view>
			<view class="btn-right" @click="show = true" >
				立即兑换
			</view>
		</view>
	
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="spec">
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="main1">
					<view style="width: 100%;height: 30rpx;"></view>
					<view class="main-store">
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Frame%402x.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
						<view class="store-name">
							{{data.shop_id?data.shop_id:'云仓优送'}}
						</view>
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/right.png" mode="" style="width: 9rpx;height: 17rpx;margin-left: 10rpx;"></image>
					</view>
					<view class="store-main">
						<image :src="data.image" mode="" style="width: 144rpx;height: 144rpx;"></image>
						<view class="store-right">
							<view class="right-top">
								{{data.title}}
							</view>
							<view class="right-center" v-if="skuName">
								{{skuName}}
							</view>
							<view class="right-money">
								<text style="font-size: 28rpx;">券</text>{{price}}
							</view>
						</view>
					</view>
				</view>
				<view class="guige">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="guigetitle">
						选择规格
					</view>
					<scroll-view class="guigebox" :scroll-y='true' :enable-flex='true'>
						<view class="guigeitem" 
							v-for="(item,index) in data.sku" 
							:key="index"
							:class="skuIndex == index ? 'choose' : ''"
							@click="guige(index,item)">
							{{item.difference.length >1?item.difference[0]+item.difference[1]:item.difference[0]}}
						</view>
					</scroll-view>
				</view>
				<view class="guigebtn" @click="GoPay">
					确认
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import WXBizDataCrypt from "@/components/wx/WXBizDataCrypt.js"
	export default {
		data() {
			return {
				id: '',
				BarTop:'',
				BarHeight:'',
				guigeitem:'',
				scrollTop: 0,
				data:'',
				skuIndex: 0,
				url:'https://store.yhflxh.com/',
				list:[],
				show: false,
				flexflag:false,
				filteredContent: '',
				spanContent:'',
			    skuName: '',
				price:'',
			}
		},
	
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
			
			if (e.scrollTop > 50) {
				this.flexflag = true
			} else {
			  this.flexflag = false
			}
		},
		methods:{
			guige(index,item){
				this.skuIndex =index
				this.guigeitem = item
				
				this.price = item.price
				this.skuName = item.difference[0]
			},
			getPhoneNumber1(item){
				let _this = this
				this.$u.api.index.getIndexData().then(val => {
					uni.login({
						provider: 'weixin',
						success: res => {
							let obj = {
								js_code:res.code
							}
							this.$u.api.index.getCode(obj).then(value =>{
								let pc = new WXBizDataCrypt(val.data?.minapp?.appid,value.data.session_key);
								let data = pc.decryptData(item.detail.encryptedData , item.detail.iv);  
								let obj = {
									mobile:data.phoneNumber
								}
								this.$u.api.index.getMobil(obj).then(value =>{
									this.show = true
								})
							})
						}
					})
				})
			},
			back(){
				uni.navigateBack({
					delta: 1,
				})
			},
			GoPay(){
				if(!this.vuex_token){
					uni.navigateTo({
						url: '/pageA/common/login'
					})
					return
				}
								
				if(this.skuIndex == -1){
					uni.showToast({
					    title: '请选择规格！',
					    icon: 'error'
					})
				}else{
					uni.navigateTo({
						url:`./pay?id=${this.data.id}&skuid=${this.guigeitem.id}`
					})
				}
			},
			goodsFollow(){
				if(!this.vuex_token){
					uni.navigateTo({
						url: '/pageA/common/login'
					})
					return
				}
				
				this.$u.api.shop.goodsFollow({id:this.id}).then(res =>{
					if(res.code == 1){
						this.$u.toast(res.msg)
						this.data.follow = !this.data.follow
					}else{
						this.$u.toast('网络异常，请稍后重试')
					}
				})
			},
			goShop(){
				uni.switchTab({
					url: '/pages/shop/index'
				})
			},
		},
		onShow() {
			this.show = false
		},
		onLoad(option) { 
			// App环境不支持uni.getMenuButtonBoundingClientRect()
			let menuButtonInfo = {};
			// #ifdef APP-PLUS
			const systemInfo = uni.getSystemInfoSync();
			// 安卓下获取状态栏高度和自定义top
			menuButtonInfo.top = systemInfo.statusBarHeight || 0;
			menuButtonInfo.height = 44; // 安卓一般为44
			// #endif
			// #ifndef APP-PLUS
			// 非APP端使用默认值
			menuButtonInfo = { top: 106, height: 44 };
			// #endif
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
			this.id = option.id;
			   
			this.$u.api.shop.getGoodsInfo({id:option.id}).then(res =>{
				if(res.code == 200){
					this.data = res.data;
					
					const divContentRegex = /<div class="item"[^>]*>([\s\S]*?)<\/div>/g;
					let divMatches = [];
					let match;
					while ((match = divContentRegex.exec(res.data.content)) !== null && divMatches.length < 8) {
						divMatches.push(match[1]);
					}
					let SpannewStyle = 'width: 45%;height:auto;margin-top:10rpx'
					const updatedSpan = divMatches.map(imgTag => {
						return imgTag.replace(/style="[^"]*"/, `style="${SpannewStyle}"`);						
					});
						  
					const imgPattern = /<img[^>]*>/g;
					const imgMatches = res.data.content.match(imgPattern) || [];
					let newStyle = 'width: 100%;height:auto;'
					const updatedImgTags = imgMatches.map(imgTag => {
						return imgTag.replace(/style="[^"]*"/, `style="${newStyle}"`);
					});
					
					this.filteredContent = updatedImgTags.join('');
					this.spanContent = updatedSpan.join('');
					this.list = res.data.images;
					
					this.guigeitem = res.data.sku[0]
					this.price = res.data.sku[0].price
					this.skuName = res.data.sku[0].difference[0]
				}else{
					uni.showToast({
					    title: res.msg,
					    icon: 'none'
					})
					setTimeout(() =>{
						uni.navigateBack({
							delta: 1,
						})
					},1000)
				}
			}).catch(req =>{
				uni.showToast({
				    title: req.msg,
				    icon: 'none'
				})
				setTimeout(() =>{
					uni.navigateBack({
							delta: 1,
					})
				},1000)
			})
		}
	}
</script>

<style lang="scss" scoped>
	._block{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.order-nav{width: 100%;font-size: 32rpx;font-weight: bold;text-align: center;position: fixed;color: black;z-index: 999;}
	.navtwo{background-color: white;}
	.order-nav-img{width: 40rpx;height: 40rpx;position: absolute;left: 0rpx;z-index: 999;}
	.nav-sp{position: absolute;width: 100%;left: 0rpx;text-align: center;}
	.spec{
		width: 100%;
		height: 100%;
		background-color: #F6F8F7;
	}
	.guige{
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		min-height: 200rpx;
		background-color: white;
		border-radius: 16rpx;
	}
	._block{
		width: 100%; 
		display: flex !important;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.guigebtn{
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		text-align: center;
		height: 82rpx;
		line-height: 82rpx;
		background-color: #F16325;
		color: white;
		font-size: 32rpx;
		font-weight: Bold;
		margin-bottom: 20rpx;
		border-radius: 44rpx;
	}
	.guigetitle{
		width: 630rpx;
		margin-left: 30rpx;
		font-size:25rpx;
		font-weight: bold;
		color: black;
		margin-top: 20rpx;
	}
	.guigebox{
		width: 630rpx;
		margin-left: 30rpx;
		max-height:400rpx;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.guigeitem{
		border-radius:30rpx;
		background-color:#F9F9F9;
		font-size:24rpx;
		color: black;
		text-align: center;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		padding: 15rpx 20rpx;
		margin-right: 20rpx;
	}
	.main1{
		width: 690rpx;
		height: 300rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.main-store{
		width: 662rpx;
		height: 26rpx;
		margin-left: 28rpx;
		display: flex;
		align-items: center;
	}
	.store-name{
		min-width: 140rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.store-main{
		width: 630rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-top: 58rpx;
	}
	.store-right{
		width: 474rpx;
		height: 144rpx;
		position: relative;
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: black;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.right-center{
		width: 100%;
		height: 20rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}
	.right-money{
		min-width: 130rpx;
		height: 28rpx;
		font-size: 36rpx;
		color: #F16325;
		position: absolute;
		bottom: 5rpx;
		line-height: 28rpx;
		font-weight: bold;
	}
	.right-num{
		width: 170rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}
	.top{
		width: 750rpx;
		padding-top: env(safe-area-inset-top);
		height: 1132rpx;
		background-color: white;
		position: relative;
		/* border-radius: 0 0 20rpx 20rpx; */
	}
	.back{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 24rpx;
		z-index: 999;
	}
	.top-img{
		width: 750rpx;
		height: 850rpx;
		position: absolute;
		top: 0;
	}
	.money{
		width: 666rpx;
		height: 38rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 200rpx;
		left: 40rpx;
	}
	.collect-num{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.price{
		font-size:56rpx;
		color: #FC595E;
	}
	.price::before{
		content: '券';
		width: 18rpx;
		height: 18rpx;
		color: #FC595E;
		font-size: 28rpx;
		line-height: 24rpx;
		text-align: left;
	}
	.collect{
		color: #989898;
		font-size: 24rpx;
	}
	.num{
		color: #989898;
		font-size: 24rpx;
		margin-left: 30rpx;
	}
	.title{
		width: 666rpx;
		margin-left: 30rpx;
		height: 84rpx;
		line-height: 42rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		position: absolute;
		bottom: 95rpx;
		overflow:hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.label{
		background: #FFE5D9;
		color: #F16325;
		font-size: 24rpx;
		padding:5rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 5rpx;
		margin-bottom: 8rpx;
	}
	.warn{
		background-image: linear-gradient(to right,#FFE5D9,#FFE5D9); 
		position: absolute; 
		font-size: 24rpx; 
		border-radius: 10rpx; 
		width: 666rpx;
		margin-left: 30rpx;
		color: #F16325;
		text-align: center;
		bottom: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.info{
		width: 640rpx;
		margin-left: 30rpx;
		height: 24rpx;
		font-size: 24rpx;
		color: #989898;
		position: absolute;
		bottom: 50rpx;
	}
	.center{
		width: 750rpx;
		height: 92rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.center-box{
		width: 678rpx;
		height: 92rpx;
		margin-left: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.left{
		display: flex;
		align-items: center;
		width: 670rpx;
		height: 92rpx;
	}
	.left-img{
		display: flex;
		align-items: center;
	}
	.left-title{
		width: 66rpx;
		text-align: left;
		font-size: 28rpx;
		font-weight: bold;
		color: #8B8B8B;
		height: 24rpx;
		line-height: 24rpx;
	}
	.img1{
		width: 128rpx;
		height: 42rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Subtract%402x%20%281%29.png') center/cover;
		text-align: center;
		line-height: 42rpx;
		margin-left: 16rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #FF615F;
	}
	.right{
		width: 10rpx;
		height: 19rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Vector%20477%402x.png') center/cover;
	}
	.footer{
		width: 750rpx;
		min-height: 540rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 20rpx;
	}
	.footer-title{
		width: 690rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: black;
		font-weight: bold;
	}
	.btn{
		width: 750rpx;
		height: 136rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
	}
	.btn-left{
		width: 140rpx;
		height: 88rpx;
		margin-left: 38rpx;
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.btn-img{
		width: 48rpx;
		height: 88rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
	}
	button:active {
	  border: none;
	}
	button::after {
	  border: none;
	}
	.btn-sp{
		font-size: 24rpx;
		color: #656666;
		text-align: center;
		width: 48rpx;
	}
	.btn-right{
		margin-top: 24rpx;
		width: 502rpx;
		height: 88rpx;
		background-color: #F16325;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-left: 40rpx;
	}
	.choose{background-color:#F16325; color: #fff;}
</style>